@function r($px){
    @return ($px/40) * 1rem;
}
html{
    position: fixed;
    height: 100%;
    width: 100%;
}
body{
    overflow: hidden;
}

.resetLeft{
    left: 0 !important;
    transition: all 1s ease;
    animation: move1 1s ease-in-out;
}
.removePage{
    left: -100% !important;
    transition: all 1s ease;
    animation: move2 1s ease-out;
}
@keyframes move1{
    0%{
        transform: scale(0) rotate(0);
    }
    100%{
        transform: scale(1) rotate(360deg);
    }
}
@keyframes move2{
    0%{
        transform: scale(0.8) rotate(360deg);
    }
    100%{
        transform: scale(0) rotate(0);
    }
}

@keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
    }
  
    25%,
    75% {
      opacity: 0;
    }
  }
  
@keyframes jello {
    from,
    11.1%,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    22.2% {
      -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
      transform: skewX(-12.5deg) skewY(-12.5deg);
    }
  
    33.3% {
      -webkit-transform: skewX(6.25deg) skewY(6.25deg);
      transform: skewX(6.25deg) skewY(6.25deg);
    }
  
    44.4% {
      -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
      transform: skewX(-3.125deg) skewY(-3.125deg);
    }
  
    55.5% {
      -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
      transform: skewX(1.5625deg) skewY(1.5625deg);
    }
  
    66.6% {
      -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
      transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
  
    77.7% {
      -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
      transform: skewX(0.390625deg) skewY(0.390625deg);
    }
  
    88.8% {
      -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
  }

  @keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

#web{
    width: 100%;
    height: 100%;
    >img{
        width: 100%;
        height: 100%;
    }

    /* 加载页 */ 
    #loadPage{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #4f4f4f;
        overflow: hidden;
        z-index: 1999;
        >img{
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        .earth{
            position: absolute;
            bottom: r(-10);
            right: 0;
            text-align: right;
            >img{
                width: 58%;  
            }  
        }
        .protag{
            position: absolute;
            bottom: r(140);
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            height: r(1000);
            >img{
                height: 100%;
            }
        }    
         .arrow{
            position: absolute;
            left: 50%;
            bottom: r(180);
            transform: translateX(-50%);
            width: r(140);
            text-align: center;
            >img{
                width: 100%;
            }
        }
        .please{
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            height: r(200);
            animation: runM 1s;
            >img{
                height: 100%;
            }
        }
        .loading{
            position: absolute;
            left: 2%;
            bottom: 0;
            font-size: r(30);
            color: white;
            >p{
                margin-bottom: r(50);                
            }
        }    
     
    }

    /* 开始首页 */ 
    #homePage{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100%;
        overflow: hidden;
        // z-index: 1999;
        >img{
            width: 100%;
            height: 100%;
            animation: rot 3s linear infinite;
        }
        .kugouLogo{
            position: absolute;
            top: 2%;
            right: 2%;
            >img{
               height: r(70);
            }
        }
        .secguess{
            position: absolute;
            top: r(110);
            left: 50%;
            transform: translateX(-50%);
            z-index: 99;
            height: r(350);
            >img{
                height: 100%;
            }
            @keyframes fadeInDownBig {
                from {
                  opacity: 0;
                  -webkit-transform: translate3d(0, -2000px, 0);
                  transform: translate3d(0, -2000px, 0);
                }
              
                to {
                  opacity: 1;
                  -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
                }
              }
        }
        .mouth{
            position: absolute;
            top: r(435);
            left: 50%;
            height: r(380); 
            width: 100%;
            text-align: center;
            animation: runM 1s infinite;
            transition: all 1s linear;
            >img:nth-of-type(1){
                height: 100%;
            }
            >img:nth-of-type(2){
                height: 50%;
                position: absolute;
                top: r(100);
                left: r(268);
            }
            @keyframes runM {
                0%{
                    transform: translateX(-50%) scale(1);
                }
                50%{
                    transform: translateX(-50%) scale(1.2);
                }
                100%{
                    transform: translateX(-50%) scale(1);
                }
            }
        }
        .man{
            position: absolute;
            width: 100%;
            bottom: r(200);
            height: r(460);
            padding-left: r(25);
            >img{
                height: 100%;
            }
            >img:nth-of-type(1){
                position: absolute;
                bottom: r(120);
                height: 80%;     
                animation: whatRun 1s infinite;          
            }
            >img:nth-of-type(3){
                position: absolute;
                bottom: r(-40);
                // height: 80%;               
            }
            .what{
                position: absolute;
                height: 18%;
            }
            .w1{
                right: r(40);
                bottom: r(280)
            }
            .w2{
                right: r(40);
                bottom: r(135)
            }
            .w3{
                right: r(330);
                bottom: r(280)
            }
            .w4{
                right: r(330);
                bottom: r(135)
            }
            @keyframes whatRun {
                0%,100%{
                    transform: rotateZ(2deg);
                }
                50%{
                    transform: rotateZ(-2deg);
                }
            }
        }
        .startBtn{
            position: absolute;
            bottom: r(90);
            left: 50%;
            // transform: translateX(-50%);
            height: r(140);
            animation: tada 1s infinite;
            width: 100%;
            text-align: center;
            >img{
                height: 100%;
            }
            @keyframes tada {
                from {
                  -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
                  transform: translateX(-50%) scale3d(1, 1, 1);
                }
              
                10%,
                20% {
                  -webkit-transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
                  transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
                }
              
                30%,
                50%,
                70%,
                90% {
                  -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
                  transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
                }
              
                40%,
                60%,
                80% {
                  -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
                  transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
                }
              
                to {
                  -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
                  transform: translateX(-50%) scale3d(1, 1, 1);
                }
              }
        }
    }

    /* 选项页 */ 
    #selectPage{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 200%;
        overflow: hidden;
        z-index: 9999;
        >audio{
            display: none;
        }
        .samllM{
            position: absolute;
            bottom: r(300);
            height: r(100);
            width: 100%;   
            >img{
                height: 100%;
                right: r(40);
                position: absolute;
                animation: runSamllM 1s linear infinite;
            }
            >span{
                height: 100%;
                right: r(60);
                bottom: r(-25);
                font-size: r(35);
                font-weight: bold;
                position: absolute;
                animation: runSamllM 1s linear infinite;
            }
            @keyframes runSamllM {
                0%{
                    transform: scale(1);
                }
                100%{
                    transform: scale(1.2);
                }
            }
        }
        .a,.b,.c{
            position: absolute;
            bottom: r(280);
            height: r(100);
            width: 75%;
            padding-left: r(40);
            >img{
                width: 100%;
                height: 100%;
            }
            >span{
                position: absolute;
                left: r(180);
                bottom: r(30)
            }
        }
        .b{
            bottom: r(160);
        }
        .c{
            bottom: r(40);
        }   

    }

    /* 背景页2 */ 
    #bg2,#bg3,#bg4,#bg5{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 300%;
        overflow: hidden;
        >img{
            width: 100%;
            height: 100%;
            animation: rot 3s linear infinite;
        }
        @keyframes rot{
            0%{
                transform: scale(3) rotate(0deg);
            }
            100%{
                transform: scale(3) rotate(360deg);
            }
        }
        .lightearth{
            position: absolute;
            top: 0;
            height: r(220);
            width: 100%;
            text-align: center;
            >img{
                height: 100%;
            }
        }
        .somePic{
            position: absolute;
            width: 100%;
            top: r(680);
            text-align: center;
            height: r(200);
            >img{
                height: 100%;
            }
            >img:nth-of-type(2){
                position: absolute;
                top: r(-400);
                left: 50%;
                transform: translateX(-50%);
                height: 300%;
            }
            >img:nth-of-type(3){
                position: absolute;
                top: r(-220);
                left: 0;
                height: 180%;
            }
            >img:nth-of-type(4){
                position: absolute;
                top: r(-360);
                left: 0;
                animation: pulse 1s linear infinite;
            }
            >img:nth-of-type(5){
                position: absolute;
                top: r(-220);
                right: 0;
                height: 180%;
            }
            >img:nth-of-type(6){
                position: absolute;
                top: r(-360);
                right: 0;
                animation: pulse 1s linear infinite;
            }
        }
    }

    /* 背景3 */
    #bg3,#bg4,#bg5,#bg1{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 400%;
        overflow: hidden;
        .circle{
            width: 100%;
            height: 100%;
            overflow: hidden;
            .c1,.c2,.c3,.c4,.c5{
                border: 40px solid #4f4f4f;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                // transform: translate(-50%,-50%);  // 写在这会被下面的动画覆盖
                animation: run 1s linear infinite;
            }
            .c1{
                width: 100px;
                height: 120px;
            }
            .c2{
                width: 250px;
                height: 270px;
            }
            .c3{
                width: 400px;
                height: 420px;
            }
            .c4{
                width: 550px;
                height: 570px;
            }
            .c5{
                width: 700px;
                height: 720px;
            }
            @keyframes run{
                0%{
                    transform: translate(-50%,-50%) rotate(0deg);
                }
                25%{
                    transform: translate(-50%,-50%) rotate(90deg);
                }
                50%{
                    transform: translate(-50%,-50%) rotate(180deg);
                }
                75%{
                    transform:translate(-50%,-50%) rotate(270deg);
                }
                100%{
                    transform:translate(-50%,-50%) rotate(360deg);
                }
            }
        }
        .watchpeos{
            position: absolute;
            width: 100%;
            top: r(140);
            height: r(480);
            z-index: 1999;
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .ban1{
            position: absolute;
            width: 100%;
            top: r(340);
            height: r(360);
            z-index: 2999;
            animation: banRun1 3s ease-in-out infinite;
            >img{
                width: 68%;
                height: 100%;
            }
            @keyframes banRun1 {
                0%{
                    transform: translateX(0);
                }
                50%{
                    transform: translateX(50%);
                }
                100%{
                    transform: translateX(0);
                }
            }
        }
        .wall{
            position: absolute;
            width: 100%;
            top: r(560);
            height: r(360);
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .jianMan{
            position: absolute;
            width: 100%;
            top: r(180);
            height: r(720);
            text-align: right;
            z-index: 3999;         
            >img{
                height: 100%;
            }
        }
        .ban2{
            position: absolute;
            width: 100%;
            top: r(450);
            height: r(360);
            text-align: right;
            z-index: 4999;
            animation: banRun2 3s ease-in-out infinite;
            >img{
                width: 68%;
                height: 100%;
            }
            @keyframes banRun2 {
                0%{
                    transform: translateX(0);
                }
                50%{
                    transform: translateX(-50%);
                }
                100%{
                    transform: translateX(0);
                }
            }
        }
        .feizhao{
            position: absolute;
            width: 100%;
            top: r(760);
            height: r(80);
            z-index: 4999;
            >img{
                height: 100%;
            }
        }
    }

        /* 背景页1 */ 
        #bg1{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 200%;
            overflow: hidden;
            z-index: 0;
            .moviePeople{
                position: absolute;
                bottom:r(420);
                height: r(600);
                left: 50%;
                transform: translateX(-50%);
                >img{
                    height: 100%;
                }
            }
            .movieSong{
                position: absolute;
                bottom:r(1000);
                left: r(80);
                height: r(160);
                animation: flash 3s linear infinite;
                >img{
                    height: 100%;
                }
            }
            .cityWall{
                position: absolute;
                width: 100%;
                bottom:r(240);
                left: 50%;
                transform: translateX(-50%);
                height: r(320);
                z-index: 2999;
                >img{
                    width: 100%;
                    height: 100%;
                }
            }
        }

    /* 背景4 */ 
    #bg4{
        left: 500%;
        .car,.hua,.yao{
            position: absolute;
            width: 100%;
            top: r(400);
            height: r(440);
            text-align: center;
            >img{
                height: 100%;
            }
        }
        .car{
            animation: whatRun 1s infinite;
        }
        .hua{
            height: r(200);
            text-align: right;
            animation: whatRun 1s infinite;
        }
        .yao{
            top: r(160);
            left: r(-80);
            height: r(240);
            animation: runYao 1s infinite;
        }
        @keyframes runYao {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.2);
            }
            100%{
                transform: scale(1);
            }
        }
    }

    /* 背景5 */ 
    #bg5{
        left: 600%;
       .lightearth{
            text-align: right;
            >img{
                position: absolute;
                right: r(-180);
            }
        }
        .oldman{
            position: absolute;
            width: 100%;
            top: r(180);
            height: r(680);
            text-align: center;
            >img{
                height: 100%;
            }
        }
        .juhuaL,.juhuaR{
            position: absolute;
            width: 100%;
            top: r(460);
            height: r(250);
            animation: whatRun 1s infinite;
            >img{
                height: 100%;
            }
        }
        .juhuaR{
            text-align: right;
        }
    }

    /* 背景6 */ 
    #bg6{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 700%;
        overflow: hidden;
        >img{
            width: 100%;
            height: 100%;
        }
        .wuman{
            position: absolute;
            width: 100%;
            top: r(180);
            height: r(600);
            text-align: right;
            >img{
                height: 100%;
            }
        }
        .boy{
            position: absolute;
            width: 100%;
            top: r(380);
            left: r(40);
            height: r(480);
            >img{
                height: 100%;
            }
        }
        .yongqi{
            position: absolute;
            width: 100%;
            top: r(100);
            left: r(40);
            height: r(280);
            animation: jello 2s linear infinite;
            >img{
                height: 100%;
            }
        }
    }
    
    /* 结束页 */ 
    #end{
        position: absolute;
        // width: 100%;
        height: 100vh;
        left: 800%;
        overflow: hidden;
        >img{
            width: 100%;
            height: 100%;
        }
        .user{
            position: absolute;
            top: r(20);
            left: r(20);
            height: r(100);
            >img:nth-of-type(1){
                height: 100%;
            }
            >img:nth-of-type(2){
                position: absolute;
                top: r(14);
                left: r(20);
                height: 68%;
            }
            >span{
                position: absolute;
                top: r(28);
                left: r(120);
                font-size: r(32);
            }
        }
        .logo{
            position: absolute;
            top: r(40);
            right: r(20);
            height: r(60);
            >img{
                height: 100%;
            }
        }
        .huangjin{
            position: absolute;
            width: 100%;
            top: r(100);
            height: r(280);
            text-align: center;
            >img{
                height: 100%;
            }
        }
        .info{
            position: absolute;
            width: 100%;
            top: r(380);
            height: r(80);
            text-align: center;
            >img{
                height: 100%;
            }
            >p{
                position: absolute;
                top: r(20);
                left: r(300);
                font-size: r(32);
                >span{
                    font-size: r(40);
                    color: goldenrod;
                }
            }
        }
        .text{
            position: absolute;
            width: 100%;
            top: r(500);
            height: r(120);
            text-align: center;
            >img{
                width: 100%;
                height: 100%;
            }
            >p{
                position: absolute;
                top: r(32);
                left: r(280);
            }
        }
        .button1{
            position: absolute;
            top: r(645);
            left: r(120);
            height: r(80);
            font-size: r(32);
            >img{
                height: 100%;
            }
            >span{
                position: absolute;
                width: 66%;
                top: r(10);
                left: r(60);
            }
        }
        .button2{
            position: absolute;
            top: r(645);
            right: r(120);
            height: r(80);
            font-size: r(32);
            >img{
                height: 100%;
            }
            >span{
                position: absolute;
                width: 66%;
                top: r(10);
                left: r(12);
            }
        }
        .title{
            position: absolute;
            width: 100%;
            // top: r(820);
            bottom: 19%;
            height: r(120);
            text-align: center;
            z-index: 999;
            >img{
                height: 100%;
            }
        }
        .paiming{
            position: absolute;
            width: 100%;
            // top: r(920);
            bottom: 2%;
            height: r(240);
            text-align: center;
            >img:nth-of-type(1){
                width: 90%;
                height: 100%;
            }
            >img:nth-of-type(2){
                position: absolute;
                top: r(40);
                left: r(60);
                height: 60%;
            }
        }


            .front1{
                height: r(200);
                background-color: #f3e085;
                transform: rotateY(0deg);
                position: absolute;
                // top: r(945);
                bottom: 4%;
                left: r(240);
                text-align: center;
                border-radius: r(20);
                z-index: 99;
                >p{
                    line-height: r(200);
                    color: red;
                }
            }
            .back1{
                height: r(200);
                transform: rotateY(180deg);
                position: absolute;
                // top: r(945);
                bottom: 4%;
                left: r(240);
                >img{
                    height: 100%;
                    border-radius: r(20);
                }
            }
            .front2{
                height: r(200);
                background-color: #f3e085;
                transform: rotateY(0deg);
                position: absolute;
                bottom: 4%;
                left: r(460);
                text-align: center;
                border-radius: r(20);
                z-index: 99;
                >p{
                    line-height: r(200);
                    color: red;
                }
            }
            .back2{
                height: r(200);
                transform: rotateY(180deg);
                position: absolute;
                bottom: 4%;
                left: r(460);
                >img{
                    height: 100%;
                    border-radius: r(20);
                }
            }

       
    }

    /* 分享页 */ 
    #share{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 900%;
        z-index: 999999;
        background: black;
        opacity: .8;
        .yd{
            position: absolute;
            width: 100%;
            top: r(80);
            height: r(360);
            text-align: center;
            >img{
                height: 100%;
            }
        }
        
    }

    /* 惊喜图片1 */
    #jxPic1{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 900%;
        z-index: 9999;
        >img{
            width: 100%;
            height: 100%;
        }
        
    } 
    #jxPic2{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 900%;
        z-index: 9999;
        >img{
            width: 100%;
            height: 100%;
        }
        
    } 
}
